<template>
  <div>
      <h4>用户信息一览</h4>
      <el-table
            :data="userCutObj.list"
            border
            style="width: 100%">

            <el-table-column
            prop="userName"
            label="用户名"
            width="180">
            </el-table-column>

            <el-table-column
            prop="pwd"
            label="密码"
            width="180">
            </el-table-column>

            <el-table-column
            label="角色"
            width="180">
            <template slot-scope="scope">
                <div>
                      {{joinArray(scope.row.roleList)}}
                </div>
              </template>
            </el-table-column>

            <el-table-column
            prop="realName"
            label="真实姓名"
            width="180">
            </el-table-column>

            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="del(scope.row.id)" type="primary" size="small">删除</el-button>
                    <el-button @click="findById(scope.row.id)" type="primary" size="small">修改</el-button>
                </template>
                </el-table-column>
        </el-table>

        <div class="block">
            <el-pagination
            @current-change="pageClick"
            :current-page.sync="curr"
            :page-size="3"
            layout="prev, pager, next, jumper"
            :total="userCutObj.total">
            </el-pagination>
        </div>

        <el-row>
            <el-col :span="12">
                <el-button type="info" @click="setShowUserAdd(true)">添加</el-button>
            </el-col>
            <el-col :span="12">
            用户名：<el-input v-model="param.userName"/><br>
            <el-button type="primary" @click="pageClick(1)">查询</el-button>
            </el-col>
        </el-row>
  </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from "vuex"
export default {
    data(){
        return {
            curr:1 //当前页码
        }
    },
     computed:{
        ...mapState('user',['userCutObj','param','updateRoleList'])
    },
    methods:{
        ...mapMutations('user',['setShowUserAdd','setUpdateUser','setShowUserUpdate','setUpdateGradeInfo']),
        ...mapActions('user',['findByItem']),
        joinArray(roleList){ //拼接用户角色集合的名称
            var str = "";
            for(var i=0;i<roleList.length;i++){
                str += roleList[i].name+"、";
            }
            return str.substring(0,str.length-1);
        },
        pageClick(val){//点击页码，查询当前页用户信息
            this.param.pageNO = val;
            this.findByItem();
        },
        async del(id){ //删除用户
            var info = await this.ajax.getSubmit("/project/user/del",{id:id});
            if(info == "ok"){//如果返回值为ok，重新访问第一页
                this.param.pageNO = 1;
                this.curr = 1;
                this.findByItem();
            }
        },
        async findById(id){//按ID查询用户信息
            //向服务器发送ajax请求，查询id对应的用户
            var userObj = await this.ajax.getSubmit("/project/user/findById",{id:id});
            //设置共享修改用户对象
            this.setUpdateUser(userObj);

           //拼接用户权限名称字符串
            var str = "";
            for(var i=0;i<userObj.gradeList.length;i++){
                str += userObj.gradeList[i].name+"、";
            }
            this.setUpdateGradeInfo(str.substring(0,str.length-1));
            //显示修改弹出层
            this.setShowUserUpdate(true);
        }
    },
    created(){
        this.findByItem();
    }
}
</script>

<style>

</style>